<template>
  <div style="overflow: scroll;">
    <div class="quanzi">
      <div class="quanziDetail">
        <div class="qzHead">
          <div class="headImg">
            <img v-bind:src="userIcon">
          </div>
          <div class="headFont">
            <p class="headFont-name">{{commentData.nickName}}</p>
            <p class="headFont-tiem" style="font-size:0.8rem;color:#afafaf;">{{countTime(commentData.showTime)}}</p>
          </div>
        </div>
        <div class="qzWenzi">
          <p>{{commentData.content}}</p>
        </div>
        <div class="qzImgs">
          <div v-for="img in imgList">
            <img @click="largeImgs()" v-bind:src="img.smallImg"/>
          </div>
        </div>

        <mt-popup
          v-model="bigImgVisible" popup-transition="popup-fade">
          <swiper :options="bigImgOption">
            <swiper-slide v-for="img in imgList">
                <img style="margin: 0 auto" v-bind:src="img.smallImg"/>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </mt-popup>

        <div class="smallIcons">
          <div class="iconDiv"><img @click="showReply('')" src="../../images/index-pl-a.png"/><p>{{commentData.commentCount}}</p></div>
          <div class="iconDiv2 iconDiv3">
            <img v-if="liked == 2" @click="upTheme(1)" src="../../images/index-dz-a.png"/>
            <img v-if="liked == 1" @click="upTheme(2)" src="../../images/index-dz-b.png"/>
            <p>{{commentData.likeCount}}</p>
          </div>
          <div class="iconDiv2">
            <img v-if="isRewarded" @click="award('')" src="../../images/index-ds-b.png"/>
            <img v-else="" @click="award('')" src="../../images/index-ds-a.png"/>
            <p>{{rewardCount}}</p>
          </div>


        </div>
        <nav class="separate"></nav>
        <mt-loadmore  :bottomMethod="loadBottom" @bottom-status-change="handleBottomChange" :bottomAllLoaded="allLoaded" ref="loadmore">
          <ul id="comments" class="comments_ul" >
            <li class="commentLi" v-for="commentSingle in comments">
              <img v-if="commentSingle.userIcon" class="c_img" :src="commentSingle.userIcon"/>
              <img v-else="" class="c_img" src="../../images/cr-012.png"/>

              <section class="commentDesc">
                <header class="nameTime">
                  <p class="nameTime-name">{{commentSingle.nickName}}</p>
                  <p class="nameTime-tiem">{{countTime(commentSingle.showTime) }}</p>
                  <nav>
                    <img v-if="commentSingle.isLike == 1" @click="upComment(commentSingle.commentId,2)" src="../../images/index-dz-b.png"/>
                    <img v-else="" @click="upComment(commentSingle.commentId,1)"  src="../../images/index-dz-a.png"/>
                    <p>{{commentSingle.likeCount}}</p>
                    <button @click="deleteComment(commentSingle.commentId)" v-if="commentSingle.isMe == 1">删除评论</button>
                  </nav>
                </header>
              </section>
              <nav class="commentContent">
                <p>
                  <span v-if="commentSingle.isReComment==1">回复{{commentSingle.pNickName}}:</span>{{commentSingle.content}}
                </p>
              </nav>
            </li>
            <li class="loadOrNo">
              <nav class="loadOrNo-foot" v-if="allLoaded">已经到底了哦</nav>
              <nav class="loadOrNo-up" v-else="">上拉加载更多</nav>
            </li>
          </ul>
          <div slot="bottom" class="mint-loadmore-bottom">
            <!--<span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'pull' }">↓</span>-->
            <span v-show="bottomStatus === 'loading'">
            <!--Loading...-->
            <div class="mint-spinner-snake" style="border-top-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); height: 28px; width: 28px;"></div>
          </span>
          </div>
        </mt-loadmore>
      </div>
    </div>
    <!--<section class="slDesc" v-if="commentData.commentCount > 3">
      <p>上拉加载更多</p>
    </section>-->



    <!--回复-->
    <div @click="showReply" class="revert">
      <div class="revert-c">
        <input class="revert-input" type="text" placeholder="写评论"/>
        <input  class="revert-button" type="button" value="回复"/>
        <img class="revert-img" src="../../images/cr-010.png">
      </div>
    </div>

    <!--打赏弹窗-->
    <div class="award-pop" @click="awardNone2" v-show="rewardShow"></div>
    <div class="award-tc" v-show="rewardShow">
      <div class="award-1"><img src="../../images/cr-014.png"/></div>
      <div class="award-2" @click="popNone"><img src="../../images/cr-015.png"/></div>
      <div class="award-3"><b>给他打赏</b></div>
      <div class="award-4">每打赏一个果币将得到一次获得奖池所有果币的机会，打赏越多，机会越大哦</div>
      <div class="award-5">
        <div class="award-minus" @click="awardMinus"><img src="../../images/cr-016.png"/></div>
        <div class="award-money">{{listNumber}}个果币</div>
        <div class="award-plus" @click="awardPlus"><img src="../../images/cr-017.png"/></div>
      </div>
      <div @click="awardGo" class="award-6">立刻打赏</div>
      <div style="height: 2rem;color: red;" v-if="rewardMsg !=''">
        {{rewardMsg}}
      </div>
      <div class="award-7">中奖后可在<span>"我的"-"果币"</span>中查看</div>
    </div>

    <!--回复框-->
    <div v-show="replyShow" class="revert-case">
      <div class="revert-case-con">
        <div class="revert-case-top">
          <a @click="cancelReply">取消</a>
          <a>写跟帖</a>
          <a @click="sendComment">发送</a>
        </div>
        <div class="revert-case-inp">
          <textarea v-model="commentContent"></textarea>
        </div>
      </div>
    </div>
  </div>

</template>

<script src="../common/js/fetch.js"></script>
<script>
  import Loadmore from 'mint-ui';
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import {getStore, setStore} from 'src/config/mUtils'
  import {themeDetail,sendComment,upTheme,upComment,deleteComment,loadCommentBottom,awardTheme} from '../../service/getData'
  export default {
    components: {
      Loadmore,swiper, swiperSlide
    },
    name: 'hello',
    data () {
      return {
        bigImgOption: {
          pagination: '.swiper-pagination',
          paginationClickable: true
        },
        deviceId:null,
        themeId:null,
        commentData: {},
        comments:{},
        commentsCount:null,
        userIcon: null, //用户头像
        imgList:[],
        replyShow : false,
        commentId: "",//被评论的评论id
        commentContent:"",
        liked:2,//是否已经点赞
        isRewarded:false,
        rewardCount:null,
        rewardShow:false,
        listNumber:1,//打赏个数
        rewardMsg:null,
        bottomStatus:'',
        allLoaded:null,
        pageSize:10,
        bigImgVisible:false,
        bigImgSrc:null
      }
    },
    mounted(){
      this.init();
      themeDetail(this.deviceId,this.themeId).then(res=>{
        console.log(res);
        this.commentData = res.data;
        this.comments = res.data.comments;
        this.commentsCount = res.data.commentCount;
        if(this.commentsCount <= this.pageSize){
            this.allLoaded = true;
        }
        this.rewardCount = this.commentData.rewardCount;
        var behaviors = res.data.behaviors;
        if(behaviors != null){
          for(var i=0;i<behaviors.length;i++){
            var behaver = behaviors[i];
            /*if(behaver.behaviorType == 'LIKE'){
              if(behaver.behaviorValue == 1){*/
                this.liked = behaver.behaviorValue;
            /*  }
            }*/
          }
        }
        this.userIcon = this.commentData.userIcon;
        this.imgList = this.commentData.imgList;
      });

    },
    created() {
      this.themeId = this.$route.params.themeId;
      this.deviceId = getStore("_bbid");
    },
    computed: {
      length () {
        return this.items.length
      }
    },

    methods:{
      largeImgs(){
        this.bigImgVisible = true;
      },
      countTime(item){
        let curentTime = new Date()
        let showTime = new Date(item);
        let day = showTime.getDate();
        let month = showTime.getMonth() + 1;
        let year = showTime.getFullYear();
        let hour = showTime.getHours();
        let min = showTime.getMinutes();

        if (month < 10) {
          month = '0' + month;
        }
        if (day < 10) {
          day = '0' + day;
        }
        if (hour < 10) {
          hour = '0' + hour;
        }
        if (min < 10) {
          min = '0' + min;
        }

        let lastShowTime = '';

        if (curentTime.getFullYear() - year > 0) {
          lastShowTime += year + '-';
        }
        if (curentTime.getDate() - day > 0) {
          lastShowTime += month + '-' + day + ' ';
        }
        lastShowTime += hour + ':' + min;

        return lastShowTime;
      },
      handleBottomChange(status){
        this.bottomStatus = status;
      },
      init() {
        var _self = this;
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
        this.deviceId = getStore("_bbid");
        //var url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/info?themeId="+_self.themeId;
        /*var url = "http://hd.zt.raiyi.com/v9/private/"+deviceId+"/weibo/theme/info?themeId="+_self.themeId;
        fetch(url).then(function (response) {
          return response.json();
        }).then(function (json) {
          console.log(json);
          _self.commentData = json.data;
          _self.comments = json.data.comments;
          _self.commentsCount = json.data.commentCount;
          _self.rewardCount = _self.commentData.rewardCount;
          var behaviors = json.data.behaviors;
          if(behaviors != null){
            for(var i=0;i<behaviors.length;i++){
              var behaver = behaviors[i];
              if(behaver.behaviorType == 'LIKE'){
                if(behaver.behaviorValue == 1){
                  _self.liked = true;
                }
              }
            }
          }
          _self.userIcon = _self.commentData.userIcon;
          _self.imgList = _self.commentData.imgList;
        });*/
      },
      showReply(commentId){
        var _self = this;
        if(commentId !== null &&　typeof(commentId)!=="undefined" &&　commentId !== ""){
          _self.commentId = commentId;
        }
        _self.replyShow = true;
      },
      cancelReply(){
        var _self = this;
        _self.replyShow = false;
      },
      sendComment(){
        var _self = this;
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
       /* var sendCommentUrl = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/comments?themeId="+_self.commentData.themeId
          +"&content="+_self.commentContent+"&visible="+_self.commentData.visible;*/
       /* var sendCommentUrl = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/theme/comments?themeId="+_self.commentData.themeId
          +"&content="+_self.commentContent+"&visible="+_self.commentData.visible;
        fetch(sendCommentUrl)
          .then(function (response) {
            return response.json();
          }).then(function (json) {
          console.log(json);
          _self.commentData = json.data;
        });*/
        sendComment(this.deviceId,this.themeId,this.commentContent,this.commentData.visible).then(json=>{
          console.log(json);
          this.comments = json.data.comments;
          this.replyShow = false;
          this.commentContent = "";
          document.getElementById("comments").focus();
        });

      },
      upTheme(like){//点赞帖子功能
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
        /*var _self = this;
        var url = null;
        if(_self.liked == false){
          //url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/like?themeId="+_self.commentData.themeId+"&like=1";
          url = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/theme/like?themeId="+_self.commentData.themeId+"&like=1";
        }else{
          //url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/like?themeId="+_self.commentData.themeId+"&like=2";
          url = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/theme/like?themeId="+_self.commentData.themeId+"&like=2";
        }*/
        upTheme(this.deviceId,this.themeId,like).then(json=>{
          console.log(json);
          this.commentData.likeCount = json.data.likeCount;
          var behaviors = json.data.behaviors;
          if(behaviors != null){
            for(var i=0;i<behaviors.length;i++){
              var behaver = behaviors[i];
              if(behaver.behaviorType == 'LIKE'){
                  this.liked = behaver.behaviorValue;
              }
            }
          }
        });
       /* fetch(url)
          .then(function (response) {
            return response.json();
          }).then(function (json) {
        });*/
      },
      upComment(commentId,like){//点赞评论功能
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
      /*  var _self = this;
        var url = null;
        //url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+this.deviceId+"/weibo/comment/like?themeId="+_self.commentData.themeId+"&like="+like+"&commentId="+commentId;
        url = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/comment/like?themeId="+_self.commentData.themeId+"&like="+like+"&commentId="+commentId;*/
        upComment(this.deviceId,this.themeId,like,commentId).then(json=>{
          console.log(json);
          if(json.code =="0000"){
            for(var i=0;i<this.comments.length;i++ ){
                var comment = this.comments[i];
                if(comment.commentId == commentId){
                    comment.isLike = like;
                    if(like == 1){
                        comment.likeCount +=1;
                    }else{
                        comment.likeCount -=1;
                    }
                }
            }
          }
        });

       /* fetch(url)
          .then(function (response) {
            return response.json();
          }).then(function (json) {

        });*/
      },
      award(commentId){//打赏
        var _self = this;
        _self.commentId = commentId;
        _self.rewardShow = true;
      },
      awardGo(){
       /* var _self = this;
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
        /!*var url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/reward?themeId="
          +_self.commentData.themeId+"&reward="+_self.listNumber;*!/
        var url = " http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/theme/reward?themeId="
          +_self.commentData.themeId+"&reward="+_self.listNumber;*/

        awardTheme(this.deviceId,this.themeId,this.listNumber).then(json=>{
          console.log(json);
          if(json.success){
            this.rewardCount = json.data.rewardCount;
            this.isRewarded = true;
            this.rewardShow = false;
          }else if(json.code='2002'){
            this.$router.push('/login_reward');
          }else {
            this.rewardMsg = json.msg;
          }
        });
        /*fetch(url).then(function (response) {
          return response.json();
        }).then(function (json) {

        })*/
      },
      deleteComment(commentId){
        /*var _self = this;
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
        //var url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/delComment?commentId="+commentId;
        var url = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/theme/delComment?commentId="+commentId;*/
        deleteComment(this.deviceId,commentId).then(json=>{
          console.log(json);
          location.reload();
        })
        /*fetch(url).then(function (response) {
          return response.json();
        }).then(function (json) {
          console.log(json);
          location.reload();
        })*/
      },
      popNone(){
        this.rewardShow=false;
        this.rewardMsg = "";
      },
      awardMinus(){
        this.listNumber--
        if(this.listNumber<=1){
          this.listNumber=1
        }
      },
      awardPlus(){
        this.listNumber++
      },
      awardNone2(){
        this.rewardShow=false
      },
      async loadBottom() {
        //var deviceId = "cf571fd3860dea145d8392c7981b293852008b387f980b57af36034d1d8c8a275fc71fed27c187539a804d1f497f7a4f";
        //var url = "http://10.99.8.51:8080/flowcenter-activity/v9/private/"+deviceId+"/weibo/theme/commentList?themeId="+this.themeId+"&pageIndex=1&pageSize="+_self.pageSize;
        //var url = "http://hd.zt.raiyi.com/v9/private/"+this.deviceId+"/weibo/theme/commentList?themeId="+this.themeId+"&pageIndex=1&pageSize="+_self.pageSize;
        this.pageSize += 10;
        loadCommentBottom(this.deviceId,this.themeId,1,this.pageSize).then(json=>{
          console.log(json);
          setTimeout(() => {
            if(this.commentsCount < this.pageSize){
              this.allLoaded = true;// 若数据已全部获取完毕
            }else {
              this.allLoaded = false;
            }
            this.$refs.loadmore.onBottomLoaded();
            this.comments = json.data;
          }, 1500);
        });

        /*fetch(url).then(function (response) {
          return response.json();
        }).then(function (json) {
        });*/
      }
    }
  }
</script>

<style lang="scss"  scoped>
  @import '../../style/mixin';
  @import '../../style/reset.css';
  .box2-wrap {
    height: 300px;
    overflow: hidden;
  }
  .rotate {
    display: inline-block;
    transform: rotate(-180deg);
  }
  .pullup-arrow {
    transition: all linear 0.2s;
    color: #666;
    font-size: 25px;
  }
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  a {
    color: #42b983;
  }
  /*回复*/
  .revert{border-top:1px solid #e5e5e5;padding:0.5rem 0;background:#fff;left:0;bottom:0;width:100%;max-width:720px;right: 0;margin: auto;position: fixed;}
  .revert-c{overflow: hidden;padding:0 0.8rem;position: relative;}
  .revert-input{float:left;width:70%;padding-left:10%;border:1px solid #e5e5e5;font-size:0.9rem;line-height: 2.3rem;border-radius: 10rem;}
  .revert-button{float:right;width:25%;background:#1cbafb;color:#fff;font-size:1rem;text-align: center;outline:none;border:none;border-radius: 10rem;line-height: 2.3rem;}
  .revert-img{position: absolute;width: 1.3rem;top: 0.45rem;left: 1.4rem;}
  /*回复的框*/
  .revert-case{position: fixed;width: 100%;height:100%;z-index:99;background:rgba(1,1,1,.5);top:0;left:0;right:0;margin:auto;max-width: 720px;}
  .revert-case-con{background: #efefef;position: absolute;left: 0;bottom: 0;width: 100%;}
  .revert-case-top{padding:0 0.8rem;display: -webkit-flex;display: flex;justify-content:space-between;}
  .revert-case-top a{color:#333;font-size:1rem;padding:0.8rem 0;}
  .revert-case-inp{padding:0 0.8rem 1rem 0.8rem;}
  .revert-case-inp textarea{width:100%;height: 5rem;border:1px solid #ddd;resize: none;font-size:0.9rem;padding:0.8rem;}
  .head{
    width: 100%;
    height: 4rem;
    background-color: #40AFFE;
    text-align: center;
  }
  .qzFont{
    padding-top: 1.5rem;

  }

  .threeIcon{
    margin-top: 2rem;
    height: 6rem;
  }
  .hot1{
    background-color: #27ccbb;
    width: 24%;/*4rem;*/
    height: 6rem;
    margin-left: 12%;

    float:left;
  }

  .quanzi {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
  }
  .quanziDetail{
    padding-top: 0.8rem;
    flex: 1;
    flex-direction: column;
  }
  .qzHead{
    overflow:hidden;
    padding:0 0.8rem;
  }
  .headImg {
    float: left;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    vertical-align: middle;
    overflow: hidden;
    background:pink;
  }
  .headImg img{
    width: 100%;
    height:100%;
    object-fit: cover;
  }
  .headFont{
    float: left;
    width: 76%;
    padding-left:0.4rem;
  }
  .qzWenzi{
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
  .headFont-name{
    color: #536792;
    font-weight: bold;
    font-size: 1rem;
    padding-bottom: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .headFont-time{
    color: #afafaf;
    font-size: 0.85rem;
  }
  .nameTime-tiem{
    color: #afafaf;
    font-size: 0.85rem;
  }
  .qzImgs{
    overflow:hidden;
    padding:0 0.8rem;
  }
  .qzImgs div{
    width:32%;
    float:left;
    margin-bottom:0.5rem;
  }
  .qzImgs img{
    width:100%;
    height:6rem;
    object-fit: cover;
  }
  .qzImgs div:nth-child(3n+2){
    margin:0 2%;
  }
  .iconDiv {
    float: left;
    width: 33.3333%;
    text-align:center;
  }
  .iconDiv2 {
    float: left;
    width: 33.3333%;
    text-align:center;
  }
  .iconDiv3{
    position:relative;
  }
  .iconDiv3:before{content: '';position: absolute;top:0;left: 0;width: 1px;height: 100%;background: #e5e5e5;}
  .iconDiv3:after{content: '';position: absolute;top:0;right: 0;width: 1px;height: 100%;background: #e5e5e5;}
  .smallIcons {
    overflow:hidden;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    padding:0.6rem 0;
  }
  .smallIcons img{
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
  }
  .smallIcons p{
    display:inline-block;
    vertical-align: middle;
    font-style: normal;
    font-size: 0.9rem;
    padding-left: 0.5rem;
  }
  .nameTime{position:relative;}
  .nameTime-name{
    color: #536792;
    font-size: 0.9rem;
    padding-bottom: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .nameTime-time{
    color: #afafaf;
    font-size: 0.85rem;
  }
  /*.mint-loadmore{margin-bottom:3rem;}*/
  .comments_ul {
    background-color: #fff;
    margin-bottom: 0rem;
    .commentLi{
          border-bottom: 1px solid #f1f1f1;
          padding: 0.5rem 0.8rem;
      .c_img{
        @include wh(3rem, 3rem);
        border-radius: 50%;
        float: left;
        margin-right:0.5rem;
      }
      .commentDesc {
        header{
          nav{
            position:absolute;
            top:1rem;
            right:0;
            width:30%;
            text-align:right;
            img{
              width: 1rem;
              display:inline-block;
                  vertical-align: middle;
            }
            p{
              display:inline-block;
              width:1.6rem;
              overflow:hidden;
              vertical-align: middle;
            }
          }
        }
      }
      .commentContent{
        display: flex;
        flex-wrap: wrap;
        padding-top:0.5rem;
      }
    }
    .loadOrNo{
      display: flex;
      flex-flow: column;
      text-align: center;
    }
    .loadOrNo-foot{color:#ddd;padding:2rem 0;}
    .loadOrNo-up{color:#ddd;padding:1rem 0 1.5rem 0;}
  }

  .commentHeadImg img{
    width: 90%;
    object-fit: cover;
  }
  .commentIcons img{
    height: 1rem;
  }
  .commentIcons p{
    float: left;padding:0.1rem 0 0 0.1rem
  }

  .loadDiv{
    margin: 0 auto;
    width: 100%;
    height: 4rem;
    text-align: center;
  }
  .reply{
    background-color: #ffffff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
  }
  .inputS{

    float: left;
    padding:0.5rem 0 0 1rem;
  }
  input{
    border-radius: 1rem;
    border: .025rem solid #e4e4e4;
  }
  .commentInput{
    width: 13rem;
    height: 2.5rem;
  }
  .replyBtn{

    width: 5.5rem;
    height: 2.5rem;
    border-radius: 1rem;
    background-color: #40AFFE;
    border: none;
  }
  .buttonS{
    float: right;
    margin: 0.5rem 1rem 0 0;
  }
  .award-pop{position: fixed;width: 100%;height:100%;z-index:99;background:rgba(1,1,1,.5);top:0;left:0;right:0;margin:auto;max-width: 720px;}
  .award-tc{background:#fff;border-radius:6px;position:fixed;padding:0.8rem;width:70%;top:25%;max-width: 720px;z-index:100;right:0;left:0;margin:auto;}
  .award-1{position:absolute;top:-1.5rem;left:0;right:0;margin:auto;width:3rem;}
  .award-1 img{width: 100%;}
  .award-2{position:absolute;top:0;right:0;width:1.5rem;padding:0.4rem;}
  .award-2 img{width:100%;}
  .award-3{padding: 1.2rem 0 0.5rem 0;font-size: 0.9rem;text-align: center;}
  .award-4{padding:0 0.2rem 0.8rem 0.2rem;text-align: center;color:#9f9f9f;}
  .award-5{overflow: hidden;margin-bottom:1rem;}
  .award-minus{float:left;width: 25%;text-align: center;border: 1px solid #e5e5e5;line-height: 2.2rem;border-radius: 10rem 0 0 10rem;}
  .award-minus img{display: inline-block;vertical-align: middle;width:20px;}
  .award-money{float:left;width: 39%;text-align: center;border: 1px solid #e5e5e5;line-height: 2.2rem;font-size:0.9rem;color:#ff1400;margin:0 4%;}
  .award-plus{float:left;width: 25%;text-align: center;border: 1px solid #e5e5e5;line-height: 2.2rem;border-radius: 0 10rem 10rem 0;}
  .award-plus img{display: inline-block;vertical-align: middle;width: 18px;}
  .award-6{background: #1cbafb;color:#fff;margin: 0 1rem 1rem 1rem;border-radius: 30rem;text-align: center;padding: 0.8rem 0;font-size: 0.9rem;}
  .award-7{text-align: center;color:#9f9f9f;}
  .award-7 span{color:#1cbafb;}
  .slDesc {
    margin-top: 1rem;
    text-align: center;
  }
  .rotate {
    transform: rotate(180deg);
  }
  .page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle;
  }
  .page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
  }
  .page-loadmore-desc:last-of-type {
    border-bottom: solid 1px #eee;
  }
  .page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-align: center;
  }
  .page-loadmore-listitem:first-child {
    border-top: solid 1px #eee;
  }
  .page-loadmore-wrapper {
    overflow: scroll;
  }
  .mint-loadmore-bottom{
    margin-bottom: 0;
  }
  .mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
  }
  .mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .mint-popup{
    position: relative;
  }
 /* .swiper-container{
    position: absolute;
  }*/

</style>
